<script lang="ts" setup>
import { useStudentStore } from '@/stores/student';
const studentinfo = useStudentStore().studentInfo;
import { useCourseStore } from '@/stores/course';

const courses = useCourseStore().courseInfo;

// 路由跳转
import { useRouter } from 'vue-router';
const router = useRouter();
const handleClick = (cid: any) => {
    router.replace({
        name: 'CourseView',
        query: {
            cid: cid
        }
    })
}
</script>

<template>
    <el-card class="up-main">
        <div class="left">
            <el-image class="el-img" :src="studentinfo.avatar" fit="cover"></el-image>
            <div class="info">
                <h3>{{ studentinfo.name }}</h3>
                <h4>学号: {{ studentinfo.schoolId }}</h4>
            </div>
        </div>
    </el-card>
    <el-card class="down-main">
        <el-row>
            <template v-for="item in courses" :key="item.cid">
                <el-col :span="6">
                    <el-card class="course_card" @click="handleClick(item.cid)">
                        <template #header>{{ item.courseName }}</template>
                        <el-image style="width: 100%; height: 250px" :src="item.courseImg" fit="cover">
                        </el-image>
                    </el-card></el-col>
            </template>
        </el-row>
    </el-card>
</template>

<style scoped>
.up-main {
    display: flex;
    text-align: center;
    justify-content: center;
    /* background-color: cornsilk; */
    height: 25vh;
    margin: 0px 60px;

    .left {
        display: flex;
        align-items: center;
        text-align: center;
        /* margin-left: 80px; */

        .el-img {
            width: 120px;
            height: 120px;
            margin-right: 30px;
            border-radius: 50%;
        }

        .info {
            flex-wrap: wrap;
        }

    }
}

.down-main {
    /* display: flex;
    justify-content: space-between; */
    /* background-color: cornsilk; */
    height: 100vh;
    margin: 30px 60px;

    .course_card {
        width: 280px;
        height: 340px;
        margin-bottom: 20px;
        margin-left: 20px;
    }
}
</style>
